Skip to content

feat(university): enhance flow banner dark mode path animations and s… - #112

Merged
nitinmohan18 merged 1 commit into
mainfrom
ui-ux
Jul 24, 2026
Merged

feat(university): enhance flow banner dark mode path animations and s…#112
nitinmohan18 merged 1 commit into
mainfrom
ui-ux

Conversation

@nitinmohan18

@nitinmohan18 nitinmohan18 commented Jul 24, 2026

Copy link
Copy Markdown
Collaborator

…implify branch cards

Summary by CodeRabbit

  • Style
    • Refreshed branch cards with updated sizing, borders, backgrounds, hover effects, and animations.
    • Simplified branch card details and updated availability labels to “Explore” or “Coming soon.”
    • Enhanced the flow banner’s rope visuals, glow effects, and step indicator styling.
    • Improved visual distinction between active, completed, and upcoming steps.

@vercel

vercel Bot commented Jul 24, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hyper-learning-tech Ready Ready Preview, Comment Jul 24, 2026 5:33pm

@coderabbitai

coderabbitai Bot commented Jul 24, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

The university branch grid now uses availability-aware card styling and CTAs. The university flow banner updates rope visuals and applies progress-aware styling to active, completed, and upcoming nodes.

Changes

University UI Visual Updates

Layer / File(s) Summary
Availability-aware branch cards
components/university/branch-grid.tsx
Branch cards use revised sizing, animation, conditional availability styling, simplified content, and Explore or Coming soon CTAs.
Progress-aware flow banner visuals
components/university/university-flow-banner.tsx
Rope fills and node visuals use updated gradients, shadows, rings, opacity, and active-step platform styling.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related PRs

Suggested reviewers: imuniqueshiv

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title is related to the PR, but it is truncated and does not clearly state the full change. Use a complete concise title like "feat(university): enhance flow banner animations and simplify branch cards".
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch ui-ux

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@nitinmohan18
nitinmohan18 merged commit 40742cc into main Jul 24, 2026
3 checks passed
@nitinmohan18
nitinmohan18 deleted the ui-ux branch July 24, 2026 17:34
@github-actions

Copy link
Copy Markdown

🎉 Congratulations @nitinmohan18!

Thank you for contributing to HyperLearningTech.

Your pull request has been successfully merged into main.

📦 Merge Summary

🚀 Keep Contributing

  • Follow the CONTRIBUTING.md guidelines.
  • Keep each Pull Request focused on a single feature or fix.
  • Run formatting, linting, type checking, and a production build before opening a PR.

Thank you for helping make HyperLearningTech better.

Happy Coding! 🚀

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@components/university/branch-grid.tsx`:
- Around line 114-118: The available-card Link in the branch card should retain
a visible keyboard focus indicator instead of relying only on hover styles.
Update the Link’s focus styling near the existing outline removal to add an
accessible focus-visible ring or equivalent indicator, while preserving the
current hover and available/unavailable card behavior.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1f51a1d5-521a-47eb-ab63-2be454a32e4c

📥 Commits

Reviewing files that changed from the base of the PR and between 4667159 and 22d3809.

📒 Files selected for processing (2)
  • components/university/branch-grid.tsx
  • components/university/university-flow-banner.tsx

Comment on lines +114 to +118
className={`group relative h-full overflow-hidden rounded-2xl border p-5 sm:p-6 transition-all duration-300 ${
isAvailable
? "border-slate-200 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.06),0_6px_16px_rgba(0,0,0,0.04)] hover:border-blue-200 hover:shadow-[0_8px_30px_rgba(59,130,246,0.12),0_1px_3px_rgba(0,0,0,0.06)] hover:-translate-y-1 dark:border-white/[0.08] dark:bg-white/[0.03] dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)] dark:hover:border-blue-500/25 dark:hover:shadow-[0_12px_32px_rgba(0,0,0,0.4),0_0_0_1px_rgba(59,130,246,0.1)]"
: "border-slate-200/50 bg-slate-50/80 shadow-[0_1px_2px_rgba(0,0,0,0.03)] dark:border-white/[0.04] dark:bg-white/[0.01]"
}`}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Restore a visible keyboard focus indicator.

The new card affordances are hover-only. Since the available-card Link removes its default outline at Line 191, keyboard users cannot identify the focused branch card.

Proposed fix
- className="block focus:outline-none"
+ className="block rounded-2xl focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-600 dark:focus-visible:outline-blue-400"
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@components/university/branch-grid.tsx` around lines 114 - 118, The
available-card Link in the branch card should retain a visible keyboard focus
indicator instead of relying only on hover styles. Update the Link’s focus
styling near the existing outline removal to add an accessible focus-visible
ring or equivalent indicator, while preserving the current hover and
available/unavailable card behavior.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant